---
title: Tailwind CSS Tabs - Material Tailwind
description: Create a secondary navigational hierarchy for your website with our Tabs component examples based on Tailwind CSS and HTML.
navigation:
  [
    "tabs",
    "tabs-icons",
    "tabs-content",
    "tabs-data-attributes",
    "required-script",
    "more-examples",
  ]
github: tabs
prev: switch
next: textarea
---

# Tailwind CSS Tabs

Get started on your web project with our responsive Tailwind CSS tabs that create a secondary navigational hierarchy for your website.

Tabs are components that render and display subsections to users. They arrange the content into categories for easy access and a cleaner-looking app. Tabs also allow users to switch between different views or sections of content within the same window or space. 

They can be horizontal or vertical, depending on the design requirements. The visual design of tabs usually includes a clear indication of which tab is currently active, often through color, highlighting, or underlining.

See below our component examples that will help you create simple and easy-to-use tabs for your Tailwind CSS project.

<br />

## Tabs Examples:

## Default Tabs

This example showcases a tabs component implemented with HTML, styled using Tailwind CSS, and designed to be flexible and responsive, fitting well within a full-width (w-full) container. 

<CodePreview
  id="tabs"
  link="tabs#tabs"
  component={<HTMLTabsExamples.TabsDefault/>}
>
```html
<div class="w-full">
  <div class="relative right-0">
    <ul class="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list">
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit"
        data-tab-target="" role="tab" aria-selected="true">
          Dashboard
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit"
        data-tab-target="" role="tab" aria-selected="false">
          Profile
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
        data-tab-target="" role="tab" aria-selected="false">
          Settings
        </a>
      </li>
    </ul>
  </div>
</div> 
```
</CodePreview>

---

## Tabs with Icons

This example showcases a more detailed tab component design that incorporates icons within each tab for a richer visual experience. The use of SVG icons alongside text labels provides a clear, intuitive way for users to navigate the tabs. 

<CodePreview
  id="tabs-icons"
  component={<HTMLTabsExamples.TabsWithIcon/>}
>
```html
<div class="w-full">
  <div class="relative right-0">
    <ul class="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list">
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit"
          data-tab-target="" role="tab" aria-selected="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
            class="w-4 h-4 mr-1.5 text-slate-500">
            <path
            d="M11.644 1.59a.75.75 0 01.712 0l9.75 5.25a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.712 0l-9.75-5.25a.75.75 0 010-1.32l9.75-5.25z">
            </path>
            <path
            d="M3.265 10.602l7.668 4.129a2.25 2.25 0 002.134 0l7.668-4.13 1.37.739a.75.75 0 010 1.32l-9.75 5.25a.75.75 0 01-.71 0l-9.75-5.25a.75.75 0 010-1.32l1.37-.738z">
            </path>
            <path
            d="M10.933 19.231l-7.668-4.13-1.37.739a.75.75 0 000 1.32l9.75 5.25c.221.12.489.12.71 0l9.75-5.25a.75.75 0 000-1.32l-1.37-.738-7.668 4.13a2.25 2.25 0 01-2.134-.001z">
            </path>
          </svg>
          <span class="ml-1">Dashboard</span>
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit"
          data-tab-target="" role="tab" aria-selected="false">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
            class="w-4 h-4 mr-1.5 text-slate-500">
            <path fill-rule="evenodd"
            d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
            clip-rule="evenodd"></path>
          </svg>
          <span class="ml-1">Profile</span>
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
        data-tab-target="" role="tab" aria-selected="false">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
            class="w-4 h-4 ml-1.5 text-slate-500">
            <path fill-rule="evenodd"
            d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
            clip-rule="evenodd"></path>
          </svg>
          <span class="ml-1">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</div> 
```
</CodePreview>

---

## Tabs with Content

This example showcases a tabs component, including both the tabs themselves and the content sections that are associated with each tab. You can reference a specific content for each tab option, using the <Code>data-tab-content</Code> data attribute.

<CodePreview
  id="tabs-content"
  link="tabs#tabs"
  component={<HTMLTabsExamples.TabsWithContent/>}
>
```html
<div class="w-full">
  <div class="relative right-0">
    <ul class="relative flex flex-wrap px-1.5 py-1.5 list-none rounded-md bg-slate-100" data-tabs="tabs" role="list">
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-md cursor-pointer text-slate-600 bg-inherit"
        data-tab-target="" role="tab" aria-selected="true" aria-controls="dashboard">
          Dashboard
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 mb-0 text-sm transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-600 bg-inherit"
        data-tab-target="" role="tab" aria-selected="false"  aria-controls="profile">
          Profile
        </a>
      </li>
      <li class="z-30 flex-auto text-center">
        <a class="z-30 flex items-center justify-center w-full px-0 py-2 text-sm mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-slate-700 bg-inherit"
        data-tab-target="" role="tab" aria-selected="false" aria-controls="settings">
          Settings
        </a>
      </li>
    </ul>

    <div data-tab-content="" class="p-5">
      <div id="dashboard" role="tabpanel">
        <p class="text-slate-400 font-light">
          Because it&apos;s about motivating the doers. Because I&apos;m
          here to follow my dreams and inspire other people to follow their
          dreams, too.
        </p>
      </div>
      <div class="hidden opacity-0" id="profile" role="tabpanel">
        <p class="text-slate-400 font-light">
          The reading of all good books is like a conversation with the
          finest minds of past centuries.
        </p>
      </div>
      <div class="hidden opacity-0" id="settings" role="tabpanel">
        <p class="text-slate-400 font-light">
          Comparing yourself to others is the thief of joy.
        </p>
      </div>
    </div>
  </div>
</div>
```
</CodePreview>

---

## Tabs Data Attributes

<span id="tabs-data-attributes" className="scroll-mt-48" />
The following data attributes are available for tabs.

| Attribute          | Description                                                                                                   |
| ------------------ | ------------------------------------------------------------------------------------------------------------- |
| `data-tabs`        | Set the main container for the tabs.                                                                          |
| `data-tab-target`  | Set the tab tigger element that when a click happened on it, it's content should be visible.                  |
| `data-tab-content` | Set tab content element.                                                                                      |
| `active`           | Set default active tab, it should be used for the trigger element where the <br /> `data-tab-target` is used. |

---

## Required Scripts

<span id="required-script" className="scroll-mt-56" />

The tabs component needs a required script files to work, you just need to add the below script file to the bottom of your html file.

```html
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/tabs.js"></script>

<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/tabs.js"></script>
```

---
<span id="more-examples"></span>

## Explore More Tailwind CSS Examples
Looking for more tab examples? Check out our **<a href="https://www.material-tailwind.com/blocks/pricing-sections" target="_blank">Pricing Sections</a>** from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.

